<template>
  <div class="app-container">
    <div class="tab-title">
      <h4>销售统计</h4>
      <div class="Statistics">
        <div class="monthly" @click="headlemonthly">当年月度销售额</div>
        <div class="Annualsales" @click="headlAnnual">历年销售统计</div>
      </div>
    </div>
    <!-- 统计内容 -->
    <el-row :gutter="20" v-for="(item,index) in saledetails" :key="index">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <p class="title">昨日销售（元）</p>
          <p class="price">{{item.yesterdaySales}}</p>
          <p class="info">
            <span>游客销售 {{item.totalVisitorSales}}</span>
            <br>
            <span>会员销售 {{item.yesterdayMemberSales}}</span>
            <br>
            <span>渠道销售 {{item.yesterdayAgentSales}}</span>
          </p>
          <div class="Seedetails" @click="Seedetails(1,'昨日销售')">查看详情</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <p class="title">本周销售（元）</p>
          <p class="price">{{item.thisWeekSales}}</p>
          <p class="info">
            <span>游客销售 {{item.thisWeekVisitorSales}}</span>
            <br>
            <span>会员销售 {{item.thisWeekMemberSales}}</span>
            <br>
            <span>渠道销售 {{item.thisWeekAgentSales}}</span>
          </p>
          <div class="Seedetails" @click="Seedetails(2,'本周销售')">查看详情</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <p class="title">本月销售（元）</p>
          <p class="price">{{item.thisMonthSales}}</p>
          <p class="info">
            <span>游客销售{{item.thisMonthVisitorSales}}</span>
            <br>
            <span>会员销售 {{item.thisMonthMemberSales}}</span>
            <br>
            <span>渠道销售 {{item.thisMonthAgentSales}}</span>
          </p>
          <div class="Seedetails" @click="Seedetails(3,'本月销售')">查看详情</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <p class="title">本年销售（万元）</p>
          <p class="price">{{item.thisYearSales}}</p>
          <p class="info">
            <span>游客销售 {{item.thisYearVisitorSales}}</span>
            <br>
            <span>会员销售 {{item.thisYearMemberSales}}</span>
            <br>
            <span>渠道销售 {{item.thisYearAgentSales}}</span>
          </p>
          <div class="Seedetails" @click="Seedetails(4,'本年销售')">查看详情</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <p class="title">累积销售（万元）</p>
          <p class="price">{{item.totalSales}}</p>
          <p class="info">
            <span>游客销售 {{item.totalVisitorSales}}</span>
            <br>
            <span>会员销售 {{item.yesterdayMemberSales}}</span>
            <br>
            <span>渠道销售 {{item.yesterdayAgentSales}}</span>
          </p>
          <div class="Seedetails" @click="Seedetails(5,'累积销售')">查看详情</div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <h4>会员区域分布</h4>
          <ul>
            <li v-for="(item,index) in SalesArea" :key="index">{{item.province}} {{item.percent}}%</li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <!-- 当年月度销售额 -->
    <el-dialog title="当年月度销售额" ref="dialog_root" :visible.sync="dialogVisible" width="30%">
      <div id="myChart" style="width:500px;height:300px;"></div>
    </el-dialog>
    <!-- 历年销售统计 -->
    <el-dialog title="历年销售统计" ref="dialog_root" :visible.sync="monthlyVisible" width="30%">
      <div id="myChart02" style="width:500px;height:300px;"></div>
    </el-dialog>
    <!-- 详情 -->
    <el-dialog :title="title" :visible.sync="dialogTableVisible">
      <el-table :data="Seedetailssale">
        <el-table-column property="goodsName" label="商品名称" width="200"></el-table-column>
        <el-table-column property="memberSales" label="会员单价"></el-table-column>
        <el-table-column property="memberSalesCount" label="数量"></el-table-column>
        <el-table-column property="memberSales" label=" 会员销售额"></el-table-column>
        <el-table-column property="agentSales" label=" 渠道销售额"></el-table-column>
        <el-table-column property="agentSalesCount" label="数量"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import echarts from "echarts";
import {
  fetchList,
  getSalesArea,
  getDetail,
  getSaleroom,
  getAllsaleroom
} from "@/api/sale";
const defaultsaleQuery = {
  merchantId: 1
};
const defaultReturnSale = {
  merchantId: null,
  type: null
};
export default {
  data() {
    return {
      dialogVisible: false,
      dialogTableVisible: false,
      monthlyVisible: false,
      saledetails: null,
      Seedetailssale: null,
      title: null,
      xAxisdata: null,
      SalesArea: null,
      listQuery: Object.assign({}, defaultsaleQuery),
      saletime: [],
      salemoney: [],
      allsalemoney: [],
      allsaletime: [],
      gridData: [
        {
          name: "九转仙粮【美肤排毒】",
          memberpirce: "111",
          num: "10",
          membersales: "200",
          channelsales: "200",
          salesnum: "2"
        },
        {
          name: "九转仙粮【美肤排毒】",
          memberpirce: "111",
          num: "10",
          membersales: "200",
          channelsales: "200",
          salesnum: "2"
        },
        {
          name: "九转仙粮【美肤排毒】",
          memberpirce: "111",
          num: "10",
          membersales: "200",
          channelsales: "200",
          salesnum: "2"
        }
      ]
    };
  },
  mounted() {
    this.getData();
    this.getSalesArea();
  },
  methods: {
    getData() {
      fetchList(this.listQuery).then(response => {
        console.log(response);
        this.saledetails = response.data;
      });
    },
    getSalesArea() {
      getSalesArea(this.listQuery).then(response => {
        console.log(response);
        this.SalesArea = response.data;
      });
    },
    headlemonthly() {
      this.dialogVisible = true;
      // setInterval(() => {
      //   //  执行echarts方法
      //   this.drawLine();
      // }, 500);
      setTimeout(function() {
       this.drawLine();
      }, 5000);
    },
    // 历年销售
    headlAnnual() {
      this.monthlyVisible = true;
      // setInterval(() => {
      //   //  执行echarts方法
      //   this.drawLine02();
      // }, 500);
      clearInterval(this.drawLine02());
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

    Seedetails(type, title) {
      this.dialogTableVisible = true;
      this.title = title;
      let params = new URLSearchParams();
      params.append("merchantId", 1);
      params.append("type", type);
      getDetail(params).then(response => {
        this.Seedetailssale = response.data;
        console.log(response.data, 222222222);
      });
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      getSaleroom(1).then(res => {
        let myChart = this.$echarts.init(document.getElementById("myChart"));
        var option = {
          tooltip: {},
          itemStyle: {
            color: "#ccc" // 线的颜色是透明的
          },
          xAxis: {
            data: []
          },
          yAxis: {},
          series: [
            {
              type: "bar",
              data: ""
            }
          ]
        };

        // paymentTime ,money
        res.data.map(item => {
          this.saletime.push(item.paymentTime);
          this.salemoney.push(item.money);
        });
        option.series[0].data = this.salemoney;
        option.xAxis.data = this.saletime;
        myChart.setOption(option);
      });
    },
    drawLine02() {
      // 基于准备好的dom，初始化echarts实例
      getAllsaleroom(1).then(res => {
        let myChart02 = this.$echarts.init(
          document.getElementById("myChart02")
        );
        var option = {
          tooltip: {},
          itemStyle: {
            color: "#ccc" // 线的颜色是透明的
          },
          xAxis: {
            data: []
          },
          yAxis: {},
          series: [
            {
              type: "bar",
              data: ""
            }
          ]
        };
        res.data.map(item => {
          this.allsaletime.push(item.paymentTime);
          this.allsalemoney.push(item.money);
        });
        option.series[0].data = this.allsalemoney;
        option.xAxis.data = this.allsaletime;
        myChart02.setOption(option);
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped >
.app-container {
  background: #fff;
  min-height: 500px;
  .tab-title {
    display: flex;
    justify-content: space-between;
    .Statistics {
      display: flex;
      justify-content: space-between;
      color: #0068b7;
      cursor: pointer;
      .monthly {
        margin-right: 10px;
      }
    }
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    .bg-purple {
      border: 1px solid #ccc;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 4px;
      .title {
        font-size: 14px;
      }
      .price {
        font-size: 16px;
        font-weight: 600;
        border-bottom: 1px solid #ccc;
        line-height: 32px;
        box-sizing: border-box;
      }
      .info {
        font-size: 14px;
        color: #7d7c7c;
        span {
          line-height: 32px;
        }
      }

      .Seedetails {
        cursor: pointer;
        color: #0068b7;
        text-align: center;
      }
    }
    .bg-purple-dark {
      border: 1px solid #ccc;
      padding: 0 10px;
      box-sizing: border-box;
      border-radius: 4px;
      h4 {
        font-size: 13px;
      }
      ul {
        overflow: hidden;
        li {
          display: inline-flex;
          margin: 0;
          padding: 0;
          width: 14%;
          text-align: left;
          float: left;
          line-height: 36px;
          color: #666;
        }
      }
    }
  }
  .el-dialog {
    .el-dialog__header {
      text-align: center !important;
      border-bottom: 2px solid #ccc;
      box-sizing: border-box;
    }
  }
}
</style>
